<template>
    <div class="remark">
        <div class="Nav">
            <van-icon name="arrow-left" class="leftIcon" @click = toClose />
            <div class="title">订单备注</div>
            <div class="ok" @click="toClose">完成</div>
        </div>
        <div class="content-box">
            <van-field class="textarea"
                v-model="message"
                rows="2"
                autosize
                type="textarea"
                maxlength="50个字"
                placeholder="暂不支持通过备注定制口味,自提订单请到门店取餐,门店不支持配送"
                show-word-limit
                />

        </div>
        
    </div>
</template>

<script>
    export default {
        name:"Remark",
        data(){
            return{
                message:'',
            }
        },
        methods:{
            toClose(){
                this.$router.push({
                    name:"Close",
                    query:{
                        value:this.message
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .remark{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        .content-box{
            width: 350px;
            height: 150px;
            margin: 10px auto;
            .textarea{
                height: 100px;
                background-color: #f3f6f6;
                color: #686969;
            }
        }
        .Nav{
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .leftIcon{
                font-size: 18px;
                color: #444;
                padding-left: 5px;
                font-weight: 700;
            }
            .title{
                font-size: 16px;
                font-weight: 550;
            }
            .ok{
                font-size: 16px;
                padding-right: 5px;
            }
        }
    }
</style>